<template>
  <div class="page_main">
    <el-tabs v-model="type" type="card" @tab-click="handleClick">
      <el-tab-pane v-if="checkHasPane('1')" label="客户池" name="1">
        <customer-pool-content ref="content1" :type="1" :industry-arr="industryArr" :user-arr="userArr"
        ></customer-pool-content>
      </el-tab-pane>
      <el-tab-pane v-if="checkHasPane('2')" label="待审核" name="2">
        <customer-pool-content ref="content2" :type="2" :show-apply-status-form-item="true"
                               :show-apply-user-id-form-item="true" :industry-arr="industryArr" :user-arr="userArr"
        ></customer-pool-content>
      </el-tab-pane>
      <el-tab-pane v-if="checkHasPane('3')" label="公海" name="3">
        <customer-pool-content ref="content3" :type="3" :industry-arr="industryArr" :user-arr="userArr"
        ></customer-pool-content>
      </el-tab-pane>
      <el-tab-pane v-if="checkHasPane('4')" label="我的申请" name="4">
        <customer-pool-content ref="content4" :show-apply-status-form-item="true" :type="4" :industry-arr="industryArr"
                               :user-arr="userArr"
        ></customer-pool-content>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CustomerPoolContent from '@/views/business/customer/components/CustomerPoolContent'
import { list_all3rd_bycode } from '@/api/business/setting/dict'
import { list_by_role_code } from '@/api/system/user'

export default {
  name: 'Index',
  components: { CustomerPoolContent },
  data() {
    return {
      type: '0',
      userArr: [],
      industryArr: [],
      paneArr: []
    }
  },
  created() {
    this.initIndustryArr()
    this.initSaleArr()
  },
  mounted() {
    // 通过权限数组检查是否显示标签页
    this.$store.dispatch('permission/checkRights', {
      names: ['customer_pool_pane', 'check_pending_pane', 'public_sea_pane', 'apply_record_pane'],
      rights: this.$store.getters.btnRights
    }).then(res => {
      for (let i = 0; i < res.length; i++) {
        if (res[i]) {
          let name = (i + 1).toString()
          this.paneArr.push(name)
          if (this.type == '0') {
            this.type = name
            this.$nextTick(() => {
              if (this.$refs['content' + name]) {
                this.$refs['content' + name].getList()
              }
            })
          }
        }
      }
    })
  },
  methods: {
    handleClick() {
      this.$refs['content' + this.type].getList()
    },
    initIndustryArr() {
      list_all3rd_bycode({ code: 'khxg-hy' }).then(
        res => {
          this.industryArr = res.data.map(item => (
            {
              id: item.id,
              name: item.name
            }
          ))
        }
      )
    },
    initSaleArr() {
      list_by_role_code({ code: 'Salesperson' }).then(res => {
        this.userArr = res.data.map(item => {
          return {
            id: item.id,
            name: item.name
          }
        })
      })
    },
    checkHasPane(name) {
      return this.paneArr.includes(name)
    }
  },
  watch: {
    type(newVal, oldVal) {
      if (this.$refs['content' + oldVal]) {
        this.$refs['content' + oldVal].resetSearchListParams()
      }
    }
  }
}
</script>

<style scoped>
.page_main {
  padding: 20px;
}
</style>
